/*
 * @Author: scopesang
 * @Date: 2022-04-08 14:38:02
 * @LastEditors: scopesang
 * @LastEditTime: 2022-04-08 16:52:50
 * @FilePath: \cms-manage\src\router.js
 * @Description:路由文件
 *
 * Copyright (c) 2022 by scopesang/大鹏科技, All Rights Reserved.
 */
import React from 'react'
/* 
    路由有两种模式：
    一种是HashRouter，带有#，
    一种是BrowserRouter，不带#，但需要后端支持修改根目录地址
    开发阶段可以先使用BrowserRouter
*/
import {
  BrowserRouter as Router,
  Route,
  Switch,
  useHistory
} from 'react-router-dom'
import Home from './pages/Home'
import Detail from './pages/Detail'
import Error from './pages/Error'
import MyIndex from './pages/MyIndex'

//定义一个纯路由组件
const BasicRoute = () => {
  return (
    // 使用时，路由器Router就是React的一个组件,Router组件本身只是一个容器，真正的路由需要Route组件定义
    <Router history={useHistory}>
      {/* Router组件有一个参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定，即URL的#部分发生变化 */}
      <Switch>
        <Route
          path={'/'}
          // Route组件的path属性指定路由的匹配规则。
          component={() => {
            ;<MyIndex>
              <Switch>
                <Route exact path={'/path'} component={<Home />}></Route>
                <Route exact path={'/detail'} component={<Detail />}></Route>
                <Route component={Error}></Route>
              </Switch>
            </MyIndex>
          }}></Route>
      </Switch>
    </Router>
  )
}

export default BasicRoute
